<style lang="less">
    @import '../../styles/loading.less';
</style>

<template>
    <div>
        <Col span="12">
            <Card>
                <p slot="title" style="height:25px;">
                    <Icon type="plus-round"></Icon> {{article_id?'编辑':'新增'}}文章
                </p>
                <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <Form-item label="标题" prop="title">
                        <Input v-model="formValidate.title" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="作者" prop="author">
                        <Input v-model="formValidate.author" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="关键词" prop="keywords">
                        <Input v-model="formValidate.keywords" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="原文链接" prop="link">
                        <Input v-model="formValidate.link" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="跳转链接" prop="redirect">
                        <Input v-model="formValidate.redirect" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="上线状态" prop="is_online">
                        <Radio-group v-model="formValidate.is_online">
                            <Radio label="1">上线</Radio>
                            <Radio label="0">下线</Radio>
                        </Radio-group>
                    </Form-item>
                    <Form-item label="简介" prop="abstract">
                        <Input type="textarea" v-model="formValidate.abstract" placeholder="Enter..."></Input>
                    </Form-item>
                    <Form-item label="详情" prop="detail">
                        <tinymceEditor v-bind:textContent="formValidate.detail" v-on:getEditor="getEditor"></tinymceEditor>
                    </Form-item>

                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                        <Button type="ghost" v-if="!article_id" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                    </Form-item>
                </Form>
            </Card>
        </Col>
    </div>
</template>

<script>
    import tinymceEditor from '../website/editor';
    export default {
        components:{
            'tinymceEditor':tinymceEditor,
        },
        data () {
            return {
                article_id: '',
                formValidate: {
                    title: '',
                    author: '中怀家猪',
                    keywords: '土猪,土猪肉,散养,健康食品,绿色食品',
                    link: '',
                    redirect: '',
                    is_online:1,
                    abstract: '',
                    detail: '',
                },
                ruleValidate: {
                    title: [
                        { required: true, message: '请填写标题' },
                    ],
                    author: [
                        { required: true, message: '请填写作者' },
                    ],
                    keywords: [
                        { required: true, message: '请填写关键词' },
                    ],
                    is_online: [
                        { required: true, message: '请选择上线状态' },
                    ],
                    abstract: [
                        { required: true, message: '请输入简介' },
                    ],
                    detail: [
                        { required: true, message: '请输入详情' },
                    ],
                },
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        let url = this.article_id ? 'admin/article/edit' : 'admin/article/add';
                        let postData = this.formValidate;
                        postData.article_id = this.article_id;
                        this.$http.post(url, this.$qs.stringify(postData)).then((res) => {
                            var d = res.data;
                            if (d.code == 0) {
                                this.$Notice.success({
                                    title: 'Success',
                                    desc: '操作成功'
                                });
                                this.$router.push({
                                    name: 'articleList'
                                });
                            } else {
                                this.$Notice.error({
                                    title: 'Error Warning',
                                    desc: `Error：${d.msg}<br>`
                                });
                            }
                        });
                    } else {
                        this.$Message.error('表单验证失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getEditor (data) {//监听编辑器
                console.log(data);
                this.formValidate.goods_desc = data;
            },
            getOne () {
                this.$http.post('admin/article/getOne', this.$qs.stringify({article_id: this.article_id})).then((res) => {
                    var d = res.data;
                    if (d.code == 0) {
                        this.formValidate = {
                            title: d.data.title,
                            author: d.data.author,
                            keywords: d.data.keywords,
                            link: d.data.link,
                            redirect: d.data.redirect,
                            is_online: d.data.is_online,
                            abstract: d.data.abstract,
                            detail: d.data.detail,
                        };
                    } else {
                        this.$Notice.error({
                            title: 'Error Warning',
                            desc: `Error：${d.msg}<br>`
                        });
                    }
                });
            },
        },
        mounted() {
            this.$nextTick(() => {
                this.article_id = this.$route.query.article_id;
                if (this.article_id) {
                    this.getOne();
                }
            });
        },
    };
</script>
